<template>
    <div id="app">
        <van-tabbar route v-if="$route.meta.isFootShow">
            <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/topic" icon="description">专题</van-tabbar-item>
            <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item replace to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item replace to="/my" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
        <keep-alive v-if="$route.meta.keepAlive">
            <router-view />
        </keep-alive>
        <router-view v-else />
        <!-- 在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。 -->
        <!-- <router-view /> -->
    </div>
</template>
<script>
export default {
    created() {
        var userInfo = {
            openId: "1321329355",

            nickName: "夏目",

            avatarUrl:
                "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
        };

        var openId = userInfo.openId;

        localStorage.setItem("userInfo", JSON.stringify(userInfo));

        localStorage.setItem("openId", openId);
    },
};
</script>
<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;
        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
